<form [formGroup]="vehicleForm" (ngSubmit)="onSubmit(vehicleForm.value)" class="form-horizontal">
  <div class="row roomTitle" >
    <div class="col-sm-offset-1 col-sm-5 title">
      <span class="glyphicon glyphicon-file"></span>
      <label>新建车辆</label>
    </div>
    <div class="col-sm-offset-5 col-sm-1">
      <button id="btn_roomsub" type="submit" class="btn btn-default btn-sm buttonSubmit">
        提交
      </button>
    </div>
  </div>
  <div>
    <hr style="border-bottom: 1px solid #e5e5e5;"/>
  </div>
  <br>
  <div class="row">
    <div align="col-sm-offset-2 col-sm-10">
      <div class="form-group">
        <label class="control-label col-sm-2"><span class="necessary">*</span>&nbsp;车辆名称</label>
        <div class="col-sm-4">
          <input formControlName="name" type="text" class="form-control " id="name"/>
        </div>
        <!--<div class="col-sm-1"></div>-->
        <label class="control-label col-sm-2">车辆类型</label>
        <div class="col-sm-4">
          <select  formControlName="vehicleType" class="selectpicker form-control" style="height: 30px" id="vehicleType"
          >
            <option *ngFor="let vehicleType of vehicleTypes" [value]="vehicleType.oid">{{vehicleType.name}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2"><span class="necessary">*</span>&nbsp;车牌号</label>
        <div class="col-sm-4">
          <input formControlName="licenseNumber" type="text" class="form-control " id="licenseNumber"/>
        </div>
        <!--<div class="col-sm-1"></div>-->
        <label class="control-label col-sm-2">用油类型</label>
        <div class="col-sm-4">
          <select formControlName="gasolineType" class="selectpicker form-control selector" style="height: 30px" id="gasolineType"
          >
            <option *ngFor="let gType of gasolineTypes" [value]="gType.id">{{gType.name}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">排量</label>
        <div class="col-sm-4">
          <input formControlName="displacement" type="text" class="form-control " id="displacement"/>
        </div>
        <!--<div class="col-sm-1"></div>-->
        <label class="control-label col-sm-2">平均油耗</label>
        <div class="col-sm-4">
          <input formControlName="averageConsumption" type="text" class="form-control " id="averageConsumption"/>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">司机</label>
        <div class="col-sm-4">
          <div class="row">
            <div class="col-sm-9">
              <input formControlName="driver" type="hidden" class="form-control " id="driver"/>
              <input formControlName="driverName" type="text" class="form-control " id="driverName"/>
            </div>
            <div class="col-sm-3">
              <button id="btn_select" type="button" (click)="btn_select_onclick()" class=" btn btn-default btn-sm buttonSelect" data-toggle="modal">
                选择
              </button>
            </div>
          </div>
        </div>
        <!--<div class="col-sm-1"></div>-->
        <label class="control-label col-sm-2">司机电话</label>
        <div class="col-sm-4">
          <input formControlName="driverPhone" type="text" class="form-control " id="driverPhone"/>
        </div>
      </div>
      <div class="form-group">
        <!--<div class="col-sm-1"></div>-->
        <label class="control-label col-sm-2">购买日期</label>
        <div class="col-sm-4">
          <div class="input-group date" id="purchaseDate">
            <input readonly formControlName="purchaseDateToString" class="form-control" type="text" id="purchaseTime"/>
            <span class="input-group-addon">
                 <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
        <label class="control-label col-sm-2">购买价格(元)</label>
        <div class="col-sm-4">
          <input formControlName="vehicleValue" type="text" class="form-control " id="vehicleValue"/>
        </div>
      </div>
      <div class="form-group">
        <!--<div class="col-sm-1"></div>-->
        <label class="control-label col-sm-2">年检时间</label>
        <div class="col-sm-4">
          <div class="input-group date" id="annualCheckDate">
            <input readonly formControlName="annualCheckDateToString" class="form-control" type="text" id="annualCheckTime"/>
            <span class="input-group-addon">
                 <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
        <label class="control-label col-sm-2">车位</label>
        <div class="col-sm-4">
          <input formControlName="carport" type="text" class="form-control " id="carport"/>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">发动机型号</label>
        <div class="col-sm-4">
          <input formControlName="engineModel" type="text" class="form-control " id="engineModel"/>
        </div>
        <!--<div class="col-sm-1"></div>-->
        <label class="control-label col-sm-2">额定载客数</label>
        <div class="col-sm-4">
          <input formControlName="passengerCapacity" type="text" class="form-control " id="passengerCapacity"/>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">额定载重量</label>
        <div class="col-sm-4">
          <input formControlName="loadCapacity" type="text" class="form-control " id="loadCapacity"/>
        </div>
        <!--<div class="col-sm-1"></div>-->
        <label class="control-label col-sm-2">ETC安装</label>
        <div class="col-sm-4">
          <nz-radio-group formControlName="etc" [(ngModel)]="radioValue" class="etc">
            <label nz-radio [nzValue]="1">
              <span>是</span>
            </label>
            <label nz-radio [nzValue]="0">
              <span>否</span>
            </label>
          </nz-radio-group>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">车辆图片</label>
        <div class="col-sm-4">
          <input class="inputfile" id="imgfile" type="file" ng2FileSelect  [uploader]="imguploader" (change)="selectedImgOnChanged($event)"  placeholder="请选择要上传的文件" multiple>
          <label for="imgfile">选择图片</label>
          <button *ngIf="imgList?.length>0" id="delimg" type="button" class="btn btn-default btn-sm btnImageDel" (click)="delImgClick()">
            删除图片
          </button>
          <label *ngIf="imgList?.length>0" for="delimg">删除图片</label>
        </div>
      </div>
      <div class="form-group" *ngFor="let img of imgList" >
        <label class="control-label col-sm-offset-2 col-sm-3">
          <a href="{{ img?.filePath }}">
            <img src="{{ img?.filePath }}" width="250px" height="180px">
          </a>
        </label>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">备注</label>
        <div class="col-sm-7">
          <textarea formControlName="description" class="form-control textareastyle" id="description"></textarea>
        </div>
      </div>
    </div>
  </div>
</form>
<div class="row">
  <div class="col-sm-7">
    <app-file-upload></app-file-upload>
  </div>
</div>

<!-- 司机开窗modal -->
<nz-modal id="udgModal"  [nzVisible]="driverIsVisible" [nzTitle]="'人员开窗'" [nzContent]="driverModalContent"
          [nzFooter]="false" (nzOnCancel)="driverHandleCancel($event)" >
  <ng-template #driverModalContent>
    <app-driver-table></app-driver-table>
  </ng-template>
</nz-modal>
<!-- modal -->
